import { Component } from '@angular/core';
import { TreeNode } from 'ng-devui/tree';

@Component({
    selector: 'd-tree-select-searchable',
    templateUrl: './tree-select-searchable.component.html',
    standalone: false
})
export class TreeSelectSearchableComponent {
  data1 = [
    {
      title: 'parent 1',
      id: 1,
    },
    {
      title: 'parent 2',
      children: [
        {
          title: 'parent 2-1',
          children: [
            {
              title: 'leaf 2-1-1',
              id: 3,
            },
            {
              title: 'leaf 2-1-2',
              id: 4,
            },
          ],
          id: 2,
        },
        {
          title: 'parent 2-2',
          children: [
            {
              title: 'leaf 2-2-1',
              id: 6,
            },
            {
              title: 'leaf 2-2-2',
              id: 7,
            },
          ],
          id: 5,
        },
      ],
      id: 18,
    },
    {
      title: 'parent 3',
      open: true,
      halfChecked: true,
      children: [
        {
          title: 'leaf 3-1',
          id: 9,
        },
        {
          title: 'leaf 3-2',
          disabled: true,
          isChecked: true,
          id: 10,
        },
        {
          title: 'leaf 3-3',
          disabled: true,
          id: 11,
        },
      ],
      id: 8,
    },
    {
      title: 'parent 4',
      disabled: true,
      children: [
        {
          title: 'leaf 4-1',
          id: 13,
        },
        {
          title: 'leaf 4-2',
          id: 14,
        },
      ],
      id: 12,
    },
    {
      title: 'parent 5',
      children: [
        {
          title: 'leaf 5-1',
          id: 16,
        },
        {
          title: 'leaf 5-2',
          id: 17,
        },
      ],
      id: 15,
    },
  ];

  data2 = [
    {
      title: 'parent 1',
      id: 1,
    },
    {
      title: 'parent 2',
      children: [
        {
          title: 'parent 2-1',
          children: [
            {
              title: 'leaf 2-1-1',
              id: 3,
            },
            {
              title: 'leaf 2-1-2',
              id: 4,
            },
          ],
          id: 2,
        },
        {
          title: 'parent 2-2',
          children: [
            {
              title: 'leaf 2-2-1',
              id: 6,
            },
            {
              title: 'leaf 2-2-2',
              id: 7,
            },
          ],
          id: 5,
        },
      ],
      id: 18,
    },
    {
      title: 'parent 3',
      open: true,
      halfChecked: true,
      children: [
        {
          title: 'leaf 3-1',
          id: 9,
        },
        {
          title: 'leaf 3-2',
          disabled: true,
          isChecked: true,
          id: 10,
        },
        {
          title: 'leaf 3-3',
          disabled: true,
          id: 11,
        },
      ],
      id: 8,
    },
    {
      title: 'parent 4',
      disabled: true,
      children: [
        {
          title: 'leaf 4-1',
          id: 13,
        },
        {
          title: 'leaf 4-2',
          id: 14,
        },
      ],
      id: 12,
    },
    {
      title: 'parent 5',
      children: [
        {
          title: 'leaf 5-1',
          id: 16,
        },
        {
          title: 'leaf 5-2',
          id: 17,
        },
      ],
      id: 15,
    },
  ];

  value1 = {
    title: 'leaf 4-1',
    id: 13,
  };
  value2 = [
    {
      title: 'leaf 4-2',
      id: 14,
    },
    {
      title: 'leaf 4-1',
      id: 13,
    },
    {
      title: 'leaf 2-1-1',
      id: 3,
    },
  ];

  showSelected($event: Event) {
    console.log('event emitted: ', $event);
  }

  customSearchFn = (treeData: TreeNode[], keyword: string): boolean | TreeNode[] => {
    /* custom search only in the tree root */
    return treeData.map((treeNode) => {
      treeNode.data.isHide = treeNode.data.title.indexOf(keyword) === -1;
      return !treeNode.data.isHide && treeNode;
    });
  };
}
